<script setup lang="ts">
import {useRouter, useRoute} from 'vue-router';
import {ref} from 'vue';
import {jStorage} from 'jzutil';
const router = useRouter();
const route = useRoute();
const tableData = ref();
const columns: any[] = [
    {
        label: '名称',
        key: 'name'
    },
    {
        label: '价格',
        key: 'price'
    }
];

const handlePreview = (row: any) => {
    router.push({
        path: '/source-level-detail',
        query: {
            id: row.id
        }
    });
};
const handleDelete = (row: any) => {};
const handleAdd = () => {
    router.push('/source/source-level-detail');
};

//init
(() => {
    tableData.value = jStorage.getLocal('levels') || [];
})();
</script>
<template>
    <el-container>
        <el-header class="page-header">
            <el-button type="primary" icon="el-icon-circle-plus" size="medium" @click="handleAdd">新增</el-button>
        </el-header>
        <el-main class="page-body">
            <div class="page-body-table">
                <el-table :data="tableData" stripe border style="width: 100%" height="100%">
                    <el-table-column type="index" width="50"> </el-table-column>
                    <el-table-column
                        :prop="item.key"
                        :label="item.label"
                        v-for="(item, index) in columns"
                        :key="index.toString()"
                    >
                    </el-table-column>
                    <el-table-column label="项目">
                        <template #default="scope">
                            <span
                                >{{ scope.row.time }}小时/{{ scope.row.count }}张/精修{{ scope.row.hightCount }}张/{{
                                    scope.row.sendLimit
                                }}/{{ scope.row.serveLimit }}</span
                            >
                            <!-- <el-tag></el-tag>
                            <el-tag type="success">张</el-tag>
                            <el-tag type="info"></el-tag>
                            <el-tag type="warning"></el-tag>
                            <el-tag type="danger">{{ scope.row.serveLimit }}</el-tag> -->
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template #default="scope">
                            <el-button size="mini" type="text" @click="handlePreview(scope.row)">编辑</el-button>
                            <el-button size="mini" type="text" @click="handleDelete(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="page-body-pagination">
                <el-pagination background layout="total, prev, pager, next" :total="1000"></el-pagination>
            </div>
        </el-main>
    </el-container>
</template>
<style scoped lang="less">
.page-header {
    display: flex;
    align-items: center;
}
.page-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    height: calc(100% - 60px);
}
.page-body-table {
    width: 100%;
    height: calc(100% - 40px);
}
</style>
